import {useState} from "react";
import {Image, Text, View} from "@tarojs/components";
import {useLoad} from '@tarojs/taro'
import './index.scss'
import Award from "../../components/svg/award.svg";
import Lock from "../../components/svg/lock.svg";
import {getRequest} from "../../util/request";


interface Medal {
  id: number;
  name: string;
  description: string;
  icon: string;
  unlocked: boolean;
  unlockedAt?: string;
}

export default function Index() {

  const [unlockedMedals, setUnlockedMedals] = useState<Medal[]>([]);
  const [lockedMedals, setLockedMedals] = useState<Medal[]>([]);

  const queryList = () => {
    getRequest('/bsMedal/mine', res => {
      setUnlockedMedals(res.data.unlockedMedals.map(item => {
        return {
          id: item.id,
          name: item.name,
          description: item.description,
          icon: item.icon,
          unlocked: true,
          unlockedAt: res.data.persionMedals.find(persionMedal => persionMedal.medalId == item.id)?.crtTime?.substring(0,10)
        }
      }))
      setLockedMedals(res.data.lockedMedals.map(item => {
        return {
          id: item.id,
          name: item.name,
          description: item.description,
          icon: item.icon,
          unlocked: false,
        }
      }))
    })
  }

  useLoad(() => {
    console.log('勋章页面加载')
    queryList()
  })

  return (
    <View className=''>
      <View className='category-title'>
        <Image src={Award} className='category-img' />
        <Text className='category-text'>已获得的勋章</Text>
      </View>
      <View className='card-list'>
        {unlockedMedals.map(medal => (
          <View className='view-card' key={medal.id}>
            <View className='medal-icon'>{medal.icon}</View>
            <View className='medal-name'>{medal.name}</View>
            <View className='medal-description'>{medal.description}</View>
            <View className='medal-date'>获得时间：{medal.unlockedAt}</View>
          </View>
        ))}
      </View>
      <View className='category-title'>
        <Image src={Lock} className='category-img' />
        <Text className='category-text'>未获得的勋章</Text>
      </View>
      <View className='card-list'>
        {lockedMedals.map(medal => (
          <View className='view-card-lock' key={medal.id}>
            <View className='medal-icon'>{medal.icon}</View>
            <View className='medal-name' style={{color: 'gray'}}>{medal.name}</View>
            <View className='medal-description'>{medal.description}</View>
            <Image src={Lock} className='lock-icon' />
          </View>
        ))}
      </View>
      <View className='page-bottom'></View>
    </View>
  )
}
